<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签页-tabs-原生js封装</title>
	<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
	<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
	<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="../public/style/common.css">
	<style type="text/css">
			.tabs{
				margin:0 auto 20px;
			}
			.tabs ul{
				overflow:hidden;
			}
			.tabs1 .nav{
				margin-bottom:10px;
			}
			.tabs1 .nav li{
				float:left;
				margin:0 10px;
				border-bottom:1px solid #fff;
			}
			.tabs1 .nav a{
				display:block;
				line-height:38px;
			}
			.tabs1 .nav .active{
				border-bottom:1px solid #000;
			}
			.tabs1 .content{
				height:240px;
				color:#666;
				overflow:hidden;
			}
			.tabs1 .content li{
				height:240px;
				background:#f4f4f4;
			}
			.tabs2{
				width: 160px;
			}
			.tabs2 .content{
				height: 120px;
			}
			.tabs2 .content li{
				width: 160px;
				height: 120px;
				background: #ccc;
			}
			.tabs2 .nav,.tabs3 .nav{
				margin: 3px 0;
				text-align:center;
			}
			.tabs2 .nav li,.tabs3 .nav li{
				display:inline-block;
				width:12px;
				height:12px;
				background: #ccc;
				margin-right:5px;
			}
			.tabs2 .nav li.active,.tabs3 .nav li.active{background:#ff0;}
			.tabs3 {
				position: relative;
				width: 220px;
			}
			.tabs3 .content{
				width: 160px;
				margin:0 auto;
				height: 120px;
			}
			.tabs3 .content li{
				width: 160px;
				height: 120px;
				background: #ccc;
			}
			.tabs3 .prev,.tabs3 .next{
				display: block;
				position: absolute;
				width: 20px;
				height: 118px;
				background: #999;
				border:1px solid #ccc;
				text-align:center;
				line-height:110px;
				cursor:pointer;
			}
			.tabs3 .prev{
				left:0;
			}
			.tabs3 .next{
				right:0;
			}

	</style>
	<script type="text/javascript" src="../code/tabs.js"></script>
</head>
<body>
	<div class="header">
        <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
        <a href="/">返回首页</a>
    </div>
    <div class="main">


		<div class="tabs tabs1">
			<ul class="nav">
				<li><a href="javascript:;">标签1</a></li>
				<li><a href="javascript:;">标签2</a></li>
				<li><a href="javascript:;">标签3</a></li>
				<li><a href="javascript:;">标签4</a></li>
			</ul>
			<ul class="content">
				<li>这里是内容1</li>
				<li>这里是内容2</li>
				<li>这里是内容3</li>
				<li>这里是内容4</li>
			</ul>
		</div>
		<script type="text/javascript">
			var j=new tabs(".tabs1", {
				triggerType: 'click',
				activeIndex: 2,
			});
			console.log(j)
		</script>

		<div class="code">
			<p>
				triggerType: 'click',表示鼠标点击时触发,activeIndex: 2,默认选中导航项的索引,执行默认参数
			</p>
			<p>new tabs(".tabs1", {
				triggerType: 'click',
				activeIndex: 2,
			});</p>
		</div>


		<div class="tabs tabs2">
			<ul class="content">
				<li style="background:#fc0;">幻灯片1</li>
				<li style="background:#f0c;">幻灯片2</li>
				<li style="background:#cf0;">幻灯片3</li>
				<li style="background:#c0f;">幻灯片4</li>
			</ul>
			<ul class="nav">
				<li><a href="javascript:;"></a></li>
				<li><a href="javascript:;"></a></li>
				<li><a href="javascript:;"></a></li>
				<li><a href="javascript:;"></a></li>
			</ul>
		</div>

		<script type="text/javascript">
			new tabs(".tabs2", {
				effect:'fade'
			});
		</script>

		<div class="code">
			<p>
				淡入淡出<br/>
				effect:'fade','fade'表淡入淡出效果,默认值/none,执行默认参数
			</p>
			<p>new tabs(".tabs2", {
				effect:'fade'
			});</p>
		</div>


		<div class="tabs tabs3">
			<a class="prev" href="javascript:;">&lt;</a>
			<a class="next" href="javascript:;">&gt;</a>
			<ul class="content">
				<li style="background:#fc0;">幻灯片1</li>
				<li style="background:#f0c;">幻灯片2</li>
				<li style="background:#cf0;">幻灯片3</li>
				<li style="background:#c0f;">幻灯片4</li>
			</ul>
			<ul class="nav">
				<li><a href="javascript:;"></a></li>
				<li><a href="javascript:;"></a></li>
				<li><a href="javascript:;"></a></li>
				<li><a href="javascript:;"></a></li>
			</ul>
		</div>
		<script type="text/javascript">
			new tabs(".tabs3", {
				effect:'fade',
				auto: true,
			});
		</script>

		<div class="code">
			<p>
				前后切换，自动播放<br/>
				effect:'fade','fade'表淡入淡出效果,auto: true,自动播放,默认值/false,鼠标经过停止,鼠标离开播放。执行默认参数
			</p>
			<p>new tabs(".tabs3", {
				effect:'fade',
				auto: true,
			});</p>
		</div>






		<div class="example">
			<div class="call">
				<h1>调用方法：</h1>
				<p>new tabs(selector,{options};</p>
			</div>
			<h2>options参数</h2>
			<table>
				<thead>
					<tr>
						<th width="150">参数</th>
						<th width="80">默认值</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>contentCls</td>
						<td>'content'</td>
						<td>内容列表的class</td>
					</tr>
					<tr>
						<td>navCls</td>
						<td>'nav'</td>
						<td>导航列表的class</td>
					</tr>
					<tr>
						<td>prevBtnCls</td>
						<td>'prev'</td>
						<td>向前一步的class</td>
					</tr>
					<tr>
						<td>nextBtnCls</td>
						<td>'next'</td>
						<td>向后一步的class</td>
					</tr>
					<tr>
						<td>activeCls</td>
						<td>'active'</td>
						<td>导航选中时的class</td>
					</tr>
					<tr>
						<td>effect</td>
						<td>'none'</td>
						<td>切换的效果:'none'表直接切换,'fade'表淡入淡出效果</td>
					</tr>
					<tr>
						<td>triggerType</td>
						<td>'mouse'</td>
						<td>切换时的触发事件类型:"mouse"表鼠标移入时触发,"click"表示鼠标点击时触发</td>
					</tr>
					<tr>
						<td>triggerCondition</td>
						<td>*</td>
						<td>导航项的条件</td>
					</tr>
					<tr>
						<td>activeIndex</td>
						<td>0</td>
						<td>默认选中导航项的索引</td>
					</tr>
					<tr>
						<td>auto</td>
						<td>false</td>
						<td>是否自动播放</td>
					</tr>
					<tr>
						<td>delay</td>
						<td>3000</td>
						<td>自动播放时停顿的时间间隔</td>
					</tr>
					<tr>
						<td>beforeEvent</td>
						<td>
							[无]
						</td>
						<td>切换前执行,返回flase时不移动;传入一个对象,包含：index事件发生前索引,count帧长度,destination目标索引,event事件对象</td>
					</tr>
					<tr>
						<td>afterEvent</td>
						<td>
							[无]
						</td>
						<td>切换后执行;传入一个对象,包含：index事件发生前索引,count帧长度,destination目标索引,event事件对象</td>
					</tr>
				</tbody>
			</table>
			<h2>callback(api)参数</h2>
			<table>
				<thead>
					<tr>
						<th width="200">方法</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>setIndex(value)</td>
						<td>切换标签页</td>
					</tr>
					<tr>
						<td>stop()</td>
						<td>停止自动播放</td>
					</tr>
					<tr>
						<td>start()</td>
						<td>开始自动播放</td>
					</tr>
					<tr>
						<td>getIndex()</td>
						<td>获取当前帧</td>
					</tr>
					<tr>
						<td>getSize()</td>
						<td>获取帧数</td>
					</tr>
				</tbody>
			</table>
		</div>
    </div>
</body>
</html>